<template>
    <view class="login">
        <!-- <view class="h5">
            <view>
                <input type="text" placeholder="手机号" v-model="mobile"/>
            </view>
            <view class="login-item">
                <input class="login-item__input" type="text" placeholder="验证码" v-model="yanzhenma">
                <button class="login-item__fasong" :disabled="fasong_type" @click="getYanzhen">{{ fasong_str }}</button>
            </view>
            <view class="login-denglu">
                <button type="primary" @click="h5Login" class="login-btn">登录/注册</button>
            </view>
        </view> -->

        <view>
            <a @click='toLogin' class="wechath5">
                <image src="../../static/wechat.png" mode="widthFix"></image>
            </a>

            <view class="loginbtn" @click='toLogin'>微信登录</view>
            <view class="descbtn">点击登录表示同意
                <text><span @click="toFuwu">免责声明</span>和<span @click="toYinsi">隐私保护</span></text>
            </view>
        </view>

        <!-- #ifdef MP-WEIXIN -->
        <view class="weixin">
            <button type="default" size="default" open-type="getUserInfo" lang="zh_CN" @getuserinfo="getUserInfo">
                微信一键登录
            </button>
        </view>
        <!-- #endif -->

        <view class="float-bottom">
            <view class="hr">-</view>
            <view class="txt">其他登陆方式</view>
            <view class="img" @click="toLogin">
                <image src="../../static/wechat.png" mode="widthFix"></image>
            </view>
        </view>
    </view>
</template>

<script>
import {
    mapState
} from 'vuex'

export default {
    data() {
        return {
            mobile: '',
            yanzhenma: '',
            fasong_str: '获取验证码',
            fasong_type: false,
            reffer_url: '', // 登录来源页的地址
        }
    },
    computed: {
        ...mapState(['userinfo']),
        ...mapState(['systemData'])
    },
    onLoad(query) {
        this.reffer_url = query.reffer ? encodeURIComponent(query.reffer) : '';
    },
    onShow() {
        if (this.userinfo) {
            uni.switchTab({
                url: '/pages/tabbar/my/my'
            })
        }

    },
    methods: {
        toLogin() {
            // 微信登录
            window.location.href = 'http://scrm.dadi30.com/api/wx/getUserDetail?hostUrl=' + this.hostName + '&refferUrl=' + this.reffer_url;
        },

        //服务协议
        toFuwu() {
            uni.navigateTo({
                url: '/pages/center/fuwu/fuwu'
            })
        },

        //隐私保护
        toYinsi(){
            uni.navigateTo({
                url: '/pages/center/yinsi/yinsi'
            })
        },

        // #ifdef MP-WEIXIN
        // 微信登录
        async getUserInfo(e) {

            const _this = this

            const {
                errMsg,
                userInfo
            } = e.detail

            if (errMsg !== "getUserInfo:ok") {
                uni.showModal({
                    title: '提示',
                    content: '您取消了授权登录,请重新授权',
                    showCancel: false
                })
                uni.navigateBack()
                return
            } else {

                // 登录成功
                console.log('微信userInfo=', userInfo)
                console.log('登录成功')

                await uni.login({
                    success(loginRes) {
                        const {
                            code
                        } = loginRes

                        _this.$api.wxlogin({
                            code,
                            nickname: userInfo.nickName,
                            gender: userInfo.gender,
                            avatar: userInfo.avatarUrl,
                            country: userInfo.country,
                            province: userInfo.province,
                            city: userInfo.city
                        }).then(res => {
                            if (res.code === 1) {
                                // 把登录信息赋值给 vuex 中的 userinfo
                                _this.$store.dispatch('set_userinfo', res.data)

                                uni.switchTab({
                                    url: '/pages/tabbar/my/my'
                                })
                            } else {
                                uni.showToast({
                                    title: '请重试!',
                                    icon: 'none'
                                })
                            }

                        }).catch(err => {
                            uni.showToast({
                                title: '请重试!',
                                icon: 'none'
                            })
                            console.log(err)
                        })

                        uni.navigateBack()

                    }
                })
            }


        },


        wxLogin() {
            console.log("点击微信登录");
            const _this = this
            uni.showModal({
                title: '您还未登录',
                content: '请先微信登录再进行操作',
                success: function (res) {
                    if (res.confirm) {
                        uni.login({
                            // provider: 'weixin',
                            success(loginRes) {
                                const {
                                    code
                                } = loginRes

                                _this.$api.wxlogin({
                                    code
                                }).then(res => {
                                    if (res.code === 1) {
                                        // 把登录信息赋值给 vuex 中的 userinfo
                                        _this.$store.dispatch('set_userinfo', res.data)

                                        uni.switchTab({
                                            url: '/pages/tabbar/my/my'
                                        })

                                    }
                                }).catch(err => {
                                    console.log(err)
                                })

                                console.log(code);
                            },
                            fail() {
                                uni.showToast({
                                    title: '请重试!',
                                    icon: 'none'
                                })
                            }

                        });
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        },
        // #endif

        // 获取验证码
        getYanzhen() {
            //验证手机号码
            if (!this.checkMobile()) return

            uni.showLoading({
                mask: true
            })

            const _this = this
            this.$api.get_yanzhenma({
                tel: this.mobile
            }).then(res => {
                //把状态设置为不可点击
                _this.fasong_type = true

                uni.hideLoading()

                var num_dao = 30
                var set_dao = setInterval(() => {
                    if (num_dao > 0) {
                        this.fasong_str = num_dao
                        num_dao = num_dao - 1
                    } else {
                        clearInterval(set_dao)
                        this.fasong_type = false
                        this.fasong_str = "获取验证码"
                    }
                }, 1000)

            }).catch(err => {
                uni.hideLoading()
                uni.showToast({
                    title: '请重试',
                    icon: 'none',
                    mask: true
                })
            })
        },

        // 登录
        h5Login() {
            const _this = this

            if (!this.checkMobile()) return

            this.$api.login({
                mobile: this.mobile,
                yanzhenma: this.yanzhenma
            }).then(res => {
                if (res.code === 1) {
                    // 把登录信息赋值给 vuex 中的 userinfo
                    _this.$store.dispatch('set_userinfo', res.data)

                    uni.switchTab({
                        url: '/pages/tabbar/my/my'
                    })
                } else {
                    uni.showToast({
                        title: '验证码错误!请重试!',
                        icon: 'none'
                    })
                }

            }).catch(err => {
                uni.showToast({
                    title: '验证码错误!请重试!',
                    icon: 'none'
                })
                console.log(err)
            })

        },

        // 验证手机号
        checkMobile() {
            if (!this.mobile) {
                uni.showToast({
                    title: '号码不能为空!',
                    icon: 'none'
                })
                return false
            } else if (!this.$api.check_mobile(this.mobile)) {
                uni.showToast({
                    title: '请输入正确的号码格式!',
                    icon: 'none'
                })
                return false
            }
            return true
        }
    }
}
</script>

<style lang="scss">
.login {
    padding: 15px;

    input {
        height: 46px;
        border: solid 1px #DDDDDD;
        border-radius: 5px;
        margin-bottom: 15px;
        padding: 0px 15px;
    }

    .login-item {
        display: flex;
        justify-content: space-between;

        .login-item__input {
            flex: 1;
            margin-right: 10px;
        }

        .login-item__fasong {
            flex-shrink: 0;
            width: 140px;
            height: 46px;
            line-height: 46px;
            border-radius: 5px;
            margin-bottom: 15px;
            text-align: center;
            color: #666;
            box-sizing: border-box;
        }
    }

    .login-btn {
        background: #f07373;
    }

    .wechath5 {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        margin-top: 80px;
        // border-bottom: 1px solid #ccc;
        padding: 20px 0;
        text-decoration: none;

        image {
            width: 95px;
            margin-right: 5px;
        }
    }

    .loginbtn {
        width: 80%;
        height: 40px;
        line-height: 40px;
        border-radius: 20px;
        background: #52c231;
        text-align: center;
        color: #fff;
        margin: 20px auto 10px;
    }

    .descbtn {
        text-align: center;
        font-size: 12px;

        text {
            color: #4190D3;
        }
    }

    .float-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        text-align: center;

        .hr{
            border-bottom: 1px solid #ccc;
            width: 90%;
            font-size: 0;
            margin: 0 auto;
        }
        .txt{
            position: relative;
            top: -10px;
            background: #fff;
            width: 100px;
            margin: 0 auto;
            color: #ccc;
            font-size: 13px;
        }
        .img {
            padding: 10px 0 40px;
            image {
                max-width: 40px;
            }
        }
    }

    // #ifdef MP-WEIXIN
    .weixin {
        margin-top: 20px;
    }

    .wx-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 100px;

        .wx-content__img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }

        .wx-content__title {
            color: #666;
            margin-top: 20px;
        }
    }

    // #endif
}
</style>
